<template>
	<view class="invite">
		<!-- #ifndef MP-TOUTIAO -->
		<view class="fixedTop">
			<u-status-bar></u-status-bar>
			<view style="height: 88rpx;display: flex;align-items: center;">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon6.png" mode="scaleToFill"
					@click="navigateBack()"></image>
			</view>
		</view>
		<!-- #endif -->

		<view class="inviteBar">
			<view class="left">
				<view class="item1">邀请有奖</view>
				<view class="item2">奖励金额<text>=受邀人收益金额</text>*8%</view>
				<view class="item3">仅可邀请未发布过作品的新主播</view>
			</view>
			<view class="right">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon14.png" mode="scaleToFill">
				</image>
				<!-- <view class="btn">马上邀请</view> -->
				<button class="btn" open-type="share" @click="shareUser">马上邀请</button>
			</view>
		</view>

		<view class="list">
			<view class="title">
				邀请记录
				<text></text>
			</view>
			<view class="item" v-for="(v,i) in teamList" :key="i">
				<view class="left">
					{{v.nickname}}
				</view>
				<view class="right">
					<text>￥{{v.total_referee_money}}</text>
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/icon15.png"
						mode="scaleToFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				teamList: [],
				total: 0
			}
		},
		onLoad() {
			this.myTeam()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			// let pages = getCurrentPages();
			// let routerUrl = pages[0].route //获取当前页的路径
			return {
				title: "快来看看这个宝藏小程序！",
				imageUrl:"https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/fxhb.png",
				path: `/pages/index/index?referee_id=${uni.getStorageSync('user').id}`,
				success(res) {},
				fail(res) {}
			}
		},
		methods: {
			//邀请记录
			async myTeam() {
				let res = await this.$http("api/user/myTeamReward", {
					page: this.page,
					size: 20,
				}, "GET")
				// console.log(res);
				if (res.code == 200) {
					this.teamList = this.teamList.concat(res.result.data)
					this.total = res.result.total
				}
			},
			shareUser() {
				if (getApp().globalData.platform == `web`) {
					let userInfo = uni.getStorageSync("user");
					uni.setClipboardData({
						data: `${window.location.origin}${window.location.pathname}#/pages/my/my?referee_id=${userInfo.id}`,
						showToast: false,
						success: () => {
							uni.showToast({
								title: '已复制邀请链接，可发送至邀请人加入',
								duration: 2000
							})
						},
						fail: (err) => {
							console.log(err);
						}
					});
				}
			}
		},
		onReachBottom() {
			if (this.teamList.length >= this.total) return
			this.page += 1
			this.myTeam()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8FAF7;
	}

	.invite {
		padding: 210rpx 32rpx 100rpx;
		background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/profitTool/inviteBack.png") no-repeat;
		background-size: 100% auto;

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 32rpx;
			}
		}

		.inviteBar {
			display: flex;
			justify-content: space-between;
			// width: 686rpx;
			height: 200rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			position: relative;
			margin-bottom: 24rpx;

			.left {
				.item1 {
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}

				.item2 {
					font-weight: bold;
					font-size: 24rpx;
					color: #FF504A;
					padding: 40rpx 0 8rpx 0;

					text {
						color: #333;
					}
				}

				.item3 {
					font-weight: 500;
					font-size: 16rpx;
					color: #9C9C9C;
				}
			}

			.right {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					position: absolute;
					top: -18rpx;
					width: 108rpx;
					height: 108rpx;
				}

				.btn {
					width: 124rpx;
					height: 52rpx;
					background: #FF504A;
					// border-radius: 28rpx 28rpx 28rpx 28rpx;
					line-height: 52rpx;
					text-align: center;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					padding: 0;
					border: none;
					margin-top: 78rpx;
				}
			}
		}

		.list {
			// width: 686rpx;
			// height: 1088rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding-bottom: 50rpx;

			.title {
				display: inline-block;
				position: relative;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				padding: 32rpx 24rpx 0;

				text {
					position: absolute;
					left: calc(50% - 18rpx);
					bottom: -12rpx;
					display: block;
					width: 36rpx;
					height: 8rpx;
					background: #FF504A;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
				}
			}

			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 44rpx 32rpx 0;

				.left {
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
				}

				.right {
					display: flex;
					align-items: center;

					text {
						padding-right: 8rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
					}

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>